<template>
	<view>
		<navbar title=" " :opacity="0" :isbg="false" :autoBack="true" :placeholder="false"></navbar>
		<view class="con">
			<!-- <image src="/static/lease/goodspic.png" class="con__pic" mode=""></image> -->
			<u-swiper :list="list1" circular height="787rpx" :autoplay="false" imgMode="aspectFit"></u-swiper>
			<view class="con__box">
				<view class="con__box__b1">
					<view class="con__box__b1__p">
						<view class="con__box__b1__price">
							{{goodsinfo.price}}
						</view>
						<view class="con__box__b1__oldp">
							￥{{goodsinfo.oldprice}}
						</view>
					</view>
					<view class="con__box__b1__name">
						{{goodsinfo.name}}
					</view>
					<view class="con__box__b1__t">
						双卡双待 顺丰包邮 赠送壳膜
					</view>
					<image src="/static/lease/tip.png" class="con__box__b1__tb" mode=""></image>
					<view class="u-flex u-flex-y-center u-flex-between con__box__b1__y">
						<view class="">
							商品押金￥{{goodsinfo.deposit}}
						</view>
						<view class="">
							365天起租·可续租·可买断
						</view>
					</view>
				</view>
				<view class="con__box__b2">
					<view class="con__box__i" @click="show=true">
						<view class="con__box__i__l">
							选择
						</view>
						<view class="con__box__i__v" v-if="!cstext">
							请选择: 套餐;颜色;内存;租期
						</view>
						<view class="con__box__i__v" v-else>
							{{cstext}}
						</view>
						<image src="/static/lease/more.png" class="con__box__i__m" mode=""></image>
					</view>
					<view class="con__box__i">
						<view class="con__box__i__l">
							配送
						</view>
						<view class="con__box__i__v" style="flex: 1;">
							顺丰快递 | 归还自付
						</view>
						<view class="con__box__i__v" style="text-align: right;flex: 1;">
							满365天寄出包邮
						</view>
					</view>
					<view class="con__box__i">
						<view class="con__box__i__l">
							参数
						</view>
						<view class="con__box__i__v">
							<view class="u-line-1" style="width: 420rpx;">
								苹果|iPhone16Pro|全网通|128GB 256..asdsadas
							</view>

						</view>
						<image src="/static/lease/more.png" class="con__box__i__m" mode=""></image>
					</view>
					<view class="con__box__i">
						<view class="con__box__i__l">
							配件
						</view>
						<view class="con__box__i__t">
							需归还
						</view>
						<view class="con__box__i__v">
							快充数据线*1
						</view>
						<image src="/static/lease/more.png" class="con__box__i__m" mode=""></image>
					</view>
				</view>

				<view class="con__box__b3">
					<view class="con__box__b3__title">
						<view class="con__box__b3__line">

						</view>
						商品详情
					</view>
					
					<image v-for="(item,index) in goodsxq" :src="URL(item)" mode="widthFix" :key="index"></image>
				</view>
			</view>


		</view>
		<view class="footer">
			<view class="u-flex u-flex-column u-flex-items-center ml48">
				<image src="/static/lease/sc.png" class="footer__icon" mode=""></image>
				<text class="footer__text">收藏</text>
			</view>
			<view class="u-flex u-flex-column u-flex-items-center ml48">
				<image src="/static/lease/kf.png" class="footer__icon" mode=""></image>
				<text class="footer__text">客服</text>
			</view>
			<u-button color="#3262FD" @click="clicksubmit"
				:customStyle='{width:"505rpx",height:"94rpx",marginLeft:"37rpx",padding:0,borderRadius:"15rpx",fontSize:"32rpx"}'>免押租</u-button>
		</view>
		<!-- 选择弹框 -->
		<u-popup :show="show" closeable @close="show=false" mode="bottom" round="20rpx">
			<view class="popbox">
				<view class="popbox__top">
					<image src="/static/lease/goodspic.png" class="popbox__top__pic" mode="aspectFit"></image>
					<view class="">
						<view class="u-flex popbox__top__price">
							<text class="popbox__top__unit">￥</text>
							9.84<text class="popbox__top__unit">/天</text> -
							<text class="popbox__top__unit">￥</text>
							23.97<text class="popbox__top__unit">/天</text>
						</view>
						<view class="popbox__top__ti">
							请选择: 套餐; 颜色; 内存; 租期
						</view>
					</view>
				</view>
				<scroll-view scroll-y="true" class="popbox__mid">

					<view class="popbox__mid__list">
						<view class="" v-for="(item,index) in goodsinfo.sku" :key="index">
							<view class="popbox__mid__list__title">
								<view class="popbox__mid__list__title__line">

								</view>
								{{item.name}}
							</view>
							<view class="u-flex u-flex-y-center u-flex-wrap">
								<view class="popbox__mid__list__item i1" v-for="(item1,index1) in item.spec" :key="index1"
									:class='item1.isx?"active":""' @click="clickxuan(index,index1,item.spec)">
									{{item1.name}}
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="popbox__footer">
					<view class="u-flex u-flex-y-center u-flex-between">
						<view class="popbox__footer__num">
							租赁数量
							<view class="popbox__footer__num__kc">
								库存{{maxnum}}
							</view>
						</view>
						<u-number-box bgColor='#F5F5F5' inputWidth='70rpx' v-model="value" @change="valChange" integer
							buttonSize='54rpx'></u-number-box>

					</view>
					<u-button color="#3262FD" @click="xzsub"
						:customStyle='{width:"690rpx",height:"94rpx",marginTop:"28rpx",padding:0,borderRadius:"15rpx",fontSize:"32rpx"}'>确认</u-button>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import goods from '@/api/_goods.js'
	export default {
		data() {
			return {
				list1: [],
				show: false,
				value: 1,
				cstext:'',
				goodsinfo:{},
				goodsid:null,
				goodsxq:[],
				maxnum:0,
				goodsspec:[]
			};
		},
		methods: {
			clickxuan(index,index1, list) {
				list.map(t => {
					t.isx = false
				})
				list[index1].isx = true
				this.$forceUpdate()
			},
			valChange(e) {
				console.log('当前值为: ' + e.value)
			},
			xzsub() {
				let arr=[]
				this.goodsinfo.sku.map(t=>{
					t.spec.map(t1=>{
						if(t1.isx){
							arr.push(t1.name)
						}
					})
				})
				if(arr.length<this.goodsinfo.sku.length){
					uni.$u.toast('请将规格选完')
					return
				}
				this.cstext=arr.join(',')
				this.clicksubmit()
			},
			clicksubmit(){
				if(!this.cstext){
					this.show=true
					return
				}
				let goodsspec=[]
				this.goodsinfo.sku.map(t=>{
					t.spec.map(t1=>{
						if(t1.isx){
							goodsspec.push(t1)
						}
					})
				})
				this.$store.commit('setgoods',{
					goods_id:this.goodsid,
					spec_json:JSON.stringify(goodsspec),
					num:this.value,
					price:this.goodsinfo.price,
					address:this.goodsinfo.address
				})
				uni.navigateTo({
					url:'/pages/lease/apply'
				})
			},
			async getgoods(){
				let res = await goods.goodsdetail({id:this.goodsid})
				if(res.data.code==1){
					this.goodsinfo=res.data.data
					this.list1.push(this.URL(this.goodsinfo.image))
					this.goodsinfo.images.split(',').map(t=>{
						this.list1.push(this.URL(t))
					})
					this.goodsinfo.content_image.split(',').map(t=>{
						this.goodsxq.push(this.URL(t))
					})
				}
			}
		},
		onLoad(o){
			this.goodsid=o.id
			this.getgoods()
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}

	.con {
		&__pic {
			width: 750rpx;
			height: 787rpx;
		}

		&__box {
			padding: 0 30rpx 172rpx;
			margin-top: -3px;
			// margin-bottom: 24rpx;

			&__b1 {
				background: #FFFFFF;
				border-radius: 20rpx;
				padding-bottom: 1rpx;
				&__p {
					padding: 26rpx 28rpx 30rpx;
					display: flex;
					align-items: center;
				}

				&__price {
					font-family: DIN Next LT Pro;
					font-weight: 500;
					font-size: 43rpx;
					color: #FF4D30;
					line-height: 31rpx;
				}

				&__oldp {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 23rpx;
					color: #919191;
					line-height: 17rpx;
					text-decoration-line: line-through;
					margin-left: 8rpx;
				}

				&__name {
					font-family: PingFang SC;
					font-weight: 800;
					font-size: 33rpx;
					color: #181818;
					line-height: 32rpx;
					margin-bottom: 24rpx;
					padding-left: 26rpx;
				}

				&__t {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #181818;
					line-height: 23rpx;
					margin-bottom: 23rpx;
					padding-left: 26rpx;

				}

				&__tb {
					width: 690rpx;
					height: 58rpx;
				}

				&__y {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 22rpx;
					color: #444446;
					line-height: 22rpx;
					margin: 10rpx 18rpx 29rpx 32rpx;
				}


			}

			&__b2 {
				background: #FFFFFF;
				border-radius: 20rpx;
				padding: 10rpx 0 5rpx;
				margin-top: 24rpx;
			}

			&__i {
				display: flex;
				align-items: center;
				justify-content: flex-start;
				padding: 27rpx 26rpx 27rpx 30rpx;

				&__l {
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 24rpx;
					color: #888888;
					line-height: 24rpx;
					margin-right: 34rpx;
				}

				&__v {
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 24rpx;
					color: #3A3A3A;
					line-height: 24rpx;
					flex: 1;

				}

				&__m {
					width: 13rpx;
					height: 22rpx;
					justify-self: flex-end;
				}

				&__t {
					width: 89rpx;
					height: 31rpx;
					background: #E5F9F8;
					border-radius: 5rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 20rpx;
					color: #4DA8A3;
					line-height: 20rpx;
					margin-right: 8rpx;
				}
			}

			&__b3 {
				padding: 52rpx 26rpx 39rpx 30rpx;

				background: #FFFFFF;
				border-radius: 20rpx;
				margin-top: 27rpxx;

				&__line {
					width: 6rpx;
					height: 25rpx;
					background: #3262FD;
					margin-right: 14rpx;
				}

				&__title {
					display: flex;
					align-items: center;
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 24rpx;
					color: #3A3A3A;
					line-height: 24rpx;
					margin-bottom: 30rpx;
				}

				&__dp {
					width: 634rpx;
					background-color: #f6f8f7;
					border-radius: 30rpx;
				}
			}
		}
	}

	.footer {
		width: 750rpx;
		height: 148rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;

		&__icon {
			width: 40rpx;
			height: 40rpx;
			margin-bottom: 22rpx;
		}

		&__text {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 20rpx;
			color: #505050;
			line-height: 20rpx;
		}

		.ml48 {
			margin-left: 48rpx;
		}
	}

	.popbox {
		height: 85vh;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		padding: 0 30rpx;

		&__top {
			// height: 248rpx;
			border-bottom: 2rpx solid #F1F1F1;
			display: flex;
			// align-items: center;
			padding: 30rpx 0 30rpx;
			position: relative;

			&__close {}

			&__pic {
				width: 188rpx;
				height: 188rpx;
				background: #F6F8F7;
				border-radius: 10rpx;
				border: 1rpx solid #F5F5F5;
				margin-right: 26rpx;
			}

			&__price {
				font-family: DIN Next LT Pro;
				font-weight: 500;
				font-size: 41rpx;
				color: #DE4E4A;
				line-height: 64rpx;
			}

			&__unit {
				font-family: PingFang SC;
				font-weight: 800;
				font-size: 26rpx;
				color: #DE4E4A;
				// line-height: 33rpx;
			}

			&__ti {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #626262;
				line-height: 46rpx;
			}
		}

		&__mid {
			height: calc(100% - 250rpx - 258rpx);

			&__list {
				padding-top: 8rpx;

				&__title {
					font-family: PingFang SC;
					font-weight: 800;
					font-size: 28rpx;
					color: #161B1F;
					line-height: 28rpx;
					padding: 27rpx 0 33rpx;
					display: flex;
					align-items: center;

					&__line {
						width: 7rpx;
						height: 28rpx;
						background: #3262FD;
						margin-right: 10rpx;
					}
				}

				&__item {
					height: 59rpx;
					background: #F5F5F5;
					border-radius: 8rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 26rpx;
					color: #161B1F;
					line-height: 26rpx;
					margin-right: 26rpx;
					margin-bottom: 28rpx;
				}

				.i1 {
					width: 185rpx;
				}

				.i2 {
					width: 144rpx;
				}

				.active {
					background: #3262FD;
					color: #FFFFFF;
				}
			}
		}

		&__footer {
			padding: 60rpx 0 22rpx;

			&__num {
				display: flex;
				align-items: flex-end;
				justify-content: space-between;
				font-family: PingFang SC;
				font-weight: 800;
				font-size: 28rpx;
				color: #161B1F;
				line-height: 28rpx;

				&__kc {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 23rpx;
					color: #A09C9C;
					line-height: 23rpx;
					margin-left: 26rpx;
				}

			}

		}
	}
</style>